<template>
    <div class="header">
        <div class="header_title" @click="backIndex">
            <div>
                Z-BLOG
            </div>
        </div>

        <div class="header_out" @click="logOut">
            <div>
                LOG OUT
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        methods:{
            backIndex:function () {
                window.location.href='./index'
            },

            logOut:function () {
                sessionStorage.clear()
                window.location.href = "./index"
            }
        }
    }
</script>

<style scoped lang="scss">
    .header{
        height: 80px;

        display: flex;
        flex-direction: row;
        box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);

        div{
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .header_title{
            margin-left: 100px;
            font-size: 24px;
            font-weight: 500;

            &:hover{
                cursor: pointer;
            }
        }

        .header_out{
            flex-grow: 1;
            text-align: right;

            margin-right: 100px;
            font-size: 18px;
            font-weight: 400;

            &:hover{
                cursor: pointer;
            }
        }
    }
</style>
